<template>

    <el-container class="container">

        <el-card class="box-card" algin="center">

            <template #header>
                <div class="card-header">
                    <span class="h4">用户名密码注册</span>
                </div>
            </template>
            <el-main>
                <!-- 注册的input -->
                <el-row class="mb-3">
                    <el-input v-model="username" placeholder="请输入账号">
                        <template #prepend>账号</template>
                    </el-input>
                </el-row>
                <el-row class="mb-3">
                    <el-input v-model="password" placeholder="请输入密码">
                        <template #prepend>密码</template>
                    </el-input>
                </el-row>
                <el-row class="mt-5">
                    <el-col :span="24">
                        <el-button type="primary" class="login" @click="userLogin" @keyup.enter="userLogin">注册
                        </el-button>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <el-row justify="end">
                    <router-link to="/login" class="registered">登录</router-link>
                </el-row>
            </el-footer>

        </el-card>

    </el-container>
</template>
  
<script>
export default {
    name: "Reguser",
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        async userLogin() {
            if (!this.username || !this.password) return alert('输入的内容不能为空')
            const { data } = await this.$http.post("/api/reguser", { username: this.username, password: this.password })
            if (data.status !== 0) return alert(data.message)

            alert('注册成功！' + '\n' + '您的账号是' + this.username + '\n' + '您的密码是' + this.password)
            this.$router.push('/login')
        },
    },
};
</script>
  
<style lang="less" scoped>
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;


    .box-card {
        width: 380px;
        height: 370px;

        .card-header {
            text-align: center;
        }

        .login {
            width: 100%;
            height: 40px;
        }

        .registered {
            padding: 10px;
            cursor: pointer;
            color: #909399;
        }
    }



}
</style>